<template>
  <div class="lottoResults">
    <van-nav-bar left-arrow="true" fixed="true" @click-left="onClickLeft">
      <span slot="title" v-text="titleName"></span>
    </van-nav-bar>
    <div class="top_header">
      <i class="iconfont icon-tixing"></i>
      <span>官方开售截止赔率非中奖率，用户奖金以出票赔率为准</span>
    </div>
    <div class="container_block">
      <span>日期-{{curDate}}</span>
      <i class="iconfont icon-rili" @click="chooseDate"></i>
    </div>
    <!-- 选择日期弹窗 -->
    <van-popup v-model="selectDateModel" class="select_date_model">
      <ul class="btn_ul">
        <li
          v-for="(item,index) in dateList"
          :key="index"
          v-text="item"
          :class="item==curDate?'is_choosed':''"
          @click="chooseItem(item)"
        ></li>
      </ul>
    </van-popup>
    <!-- 列表数据 -->
    <resultList
      :queryDate="curDate"
    ></resultList>
    <template v-if="queryDataResult === 0" >
      <XCNodata :title="'没有查询到数据'"></XCNodata>
    </template>
  </div>
</template>
<script>
import { NavBar } from "vant";
import resultList from "./components/basketball_result_list.vue";
import XCNodata from "@comp/common/XC-noData.vue";

export default {
  name: "lottoResults",
  components: {
    NavBar,
    resultList,
    XCNodata
  },
  data() {
    return {
      titleName: "竞彩篮球开奖",
      curDate: "",
      selectDateModel: false, // 选择日期弹窗控制
   
    };
  },
  props: {},
  watch: {},
  methods: {
    // 头部左侧返回
    onClickLeft() {
      this.$router.push({
        path: "/basketball"
      });
    },
    // 选择当前日期
    chooseItem(val) {
      this.curDate = val;
      this.selectDateModel = false;
    },
    // 初始化日期显示 弹窗
    chooseDate() {
      this.dateList = [];
      for (let i = 0, j = -10; i > j; i--) {
        this.dateList.push(this.getBefourDateStr(i));
      }
      this.selectDateModel = true;
    },
    // 获取N 天前的日期 返回 年月日
    getBefourDateStr(AddDayCount, format = "") {
      let dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
      let y = dd.getFullYear();
      let m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; //获取当前月份的日期，不足10补0
      let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
      return y + format + m + format + d;
    },
   
    // 展开模态窗口事件
    onPointClicked() {
      console.log("取消");
    },
    
    onSureClicked() {
      console.log("确定");
    }
  },
  activated() {
   
  },
  created() {
    
    this.curDate = this.getBefourDateStr(0);
  }
};
</script>
<style lang="less" scoped>
.lottoResults {
  // 头部提示
  .top_header {
    height: 44px;
    line-height: 44px;
    font-size: 13px;
    padding: 0 15px 0 15px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #f4f4f4;
    .icon-tixing {
      color: @auxiliary-color2;
    }
    span {
      padding-left: 4px;
    }
  }
  //  日期选择ITem
  .container_block {
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    background-color: #fff;
    font-size: 15px;
    display: flex;
    span {
      flex: 1;
    }
    .icon-rili {
      flex: 1;
      text-align: right;
      font-size: 22px;
      color: @auxiliary-color2;
    }
  }
  // 日期选择弹窗
  .select_date_model {
    width: 90%;
    height: auto;
    max-height: 300px;
    overflow-y: scroll;
    border-radius: 4px;
    .btn_ul {
      min-height: 184px;
      max-height: 184px;
      padding: 15px;
      font-size: 0;
      max-height: 185px;
      overflow: auto;
      .is_choosed {
        border-color: #ff473a;
        color: #ff473a;
      }
      li {
        display: inline-block;
        font-size: 15px;
        margin-left: 15px;
        border: 1px solid #e8e8e8;
        width: 90px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        margin-bottom: 10px;
        border-radius: 5px;
        overflow: hidden;
        &:nth-child(3n + 1) {
          margin-left: 0;
        }
      }
    }
  }
}
</style>
